<template>
  <div id="result">
    <!-- success成功 warn失败  waiting等待-->
    <msg class="msg_box" v-if="msg" :title="msg.title" :description="msg.description" :buttons="msg.buttons" :icon="msg.icon"></msg>
    <x-table full-bordered style="background-color:#fff;" v-if="resultData">
      <tbody>
        <tr>
          <td>付款金额</td>
          <td>{{resultData.goods_price}}</td>
        </tr>
        <tr>
          <td>购买卡数</td>
          <td>{{resultData.cardnum}}</td>
        </tr>
        <tr>
          <td>商户单号</td>
          <td>{{resultData.order_sn}}</td>
        </tr>
        <tr>
          <td>交易时间</td>
          <td>{{resultData.pay_time}}</td>
        </tr>
        <tr>
          <td>交易单号</td>
          <td>{{resultData.pay_code}}</td>
        </tr>
      </tbody>
    </x-table>
  </div>
</template>

<script>
import { Msg, XTable, dateFormat } from "vux";
export default {
  data() {
    return {
      resultData: null,
      msg: null //信息参数
    };
  },
  filters: {
    dateFormat
  },
  created() {
    //成功后调用更新接口（后端用来更新订单号）
    this.apiService.payment
      .paymentresult(this.$route.query)
      .then(res => {
        if(res.data.order){
          this.resultData = res.data.order;
          this.resultData.pay_time = dateFormat(
            this.resultData.pay_time * 1000,
            "YYYY-MM-DD hh:mm:ss"
          );
        }
        //获取到参数信息来判断失败与成功
        this.getJudgeMsg(res.data.status, res.data.link);
      });
  },
  components: {
    Msg,
    XTable
  },
  methods: {
    getJudgeMsg(status, url) {
      if (status === 1) {
        this.msg = {
          title: "支付成功",
          description: "温馨提示：请登录自己的账号，核对自己的房卡数量",
          icon: "success",
          buttons: [
            {
              type: "success",
              text: "返回",
              link: url
            }
          ]
        };
      } else {
        this.msg = {
          title: "支付失败",
          description: "温馨提示：请联系代理商补发房卡",
          icon: "warn",
          buttons: [
            {
              type: "default",
              text: "返回",
              link: url
            }
          ]
        };
      }
    }
  }
};
</script>
<style scoped>
#result {
  padding: 0.2rem;
}
</style>
<style>
#result .msg_box a {
  color: #000;
}
#result tr {
  font-size: 0.26rem;
}
#result tr td:nth-child(1) {
  padding: 0 0.2rem;
}
</style>